<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script src = 'jquery-1.10.1.min.js'></script>
        <script>
            /* 
                • insertBefore()     before()
                • insertAfter()      after()
                • appendTo() 插入到子节点的末尾      appendChild(类似JS的方法)
                   append()
                • prependTo() 插入到子节点的首位    prepend()
                • remove()
             */
             $(function(){
                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div"));
                
                //找到div节点，插入到span节点的后面
                // $("div").insertAfter($("span"));

                //找到span节点，插入到div节点的子节点的末尾
                // $("span").appendTo($("div"));

                //找到span节点，插入到div节点子节点的首位
                // $("span").prependTo($("div"));

                // $("div").remove();


                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div")).css("backgroundColor", 'red');

                //div节点前面是span
                $("div").before($("span")).css("backgroundColor", 'red');
             })
        </script>
    </head>
    <body>
        <div id = 'div1'><em>em</em>div文本</div>
        <span>span</span>
    </body>
</html>